/**
 * Created by JLB1 on 2017/2/7.
 */

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { addErrorListener } from '../../lib/handleError';
import weixinShare from '../../lib/weixinShare';
import Clipboard from 'clipboard';
import AJAX from '../../lib/ajax';
import Tools from '../../lib/tools';
import Dialog from '../MyPackage/components/Dialog';
import Toast from '../MyPackage/components/Toast';
import AdBlock from '../../components/AdBlock';
import ReachBottom from '../../components/ReachBottom';

require('../../lib/rem');
require('../../styles/common.less');
require('../../styles/lux.less');
require('../../styles/resetWeui.less');
require('./PickUpDetailOne.less');

class ExpressDetailOne extends Component {
    constructor(props) {
        super(props);
        this.state = {
            order_id: Tools.getParams().order_id,
            data: {
                id: 0,
                type: 1,//1 柜体 2货架 3 堆
                isNeedPay: true,//是否需要支付
                isEnough: true,//是否余额充足
                addr: '',
                cabinet_code: '',
                settle_amount: '',
                basic_amount: '',
                delay_amount: '',
                balance: '',
                wait_time: '',
                exp_name: '',
                exp_code: '',
                scan_confirm: '',
            },
            isShowDetail: false,//是否展示收费详情
            isLoading: true,//是否获取到数据
            rule: '',
            showCostDetail: false,
        };
    }

    componentWillMount() {
        addErrorListener()()
        weixinShare.hideAll()
        // 获取详情
        const id = Tools.getParams().order_id;

        AJAX.request('order_detail', { order_id: id }, (data) => {
            if (data.code === 0) {
                const dataBody = data.body;
                let copyData = {
                    id: dataBody.id,
                    type: dataBody.storage_info.type,
                    isNeedPay: dataBody.settle_amount >= 0, // 是否需要支付
                    isEnough: dataBody.balance >= dataBody.settle_amount, // 余额是否充足
                    addr: dataBody.storage_info.addr,
                    cabinet_code: dataBody.storage_info.code,
                    settle_amount: (dataBody.settle_amount / 100).toFixed(2),
                    basic_amount: (dataBody.basic_amount / 100).toFixed(2),
                    delay_amount: (dataBody.delay_amount / 100).toFixed(2),
                    balance: (dataBody.balance / 100).toFixed(2),
                    wait_time: dataBody.wait_time,
                    exp_name: dataBody.exp_name,
                    exp_code: dataBody.exp_code,
                    scan_confirm: dataBody.storage_info.scan_confirm,
                };

                this.setState({
                    data: copyData,
                    out_time: dataBody.out_time,
                    isLoading: false,
                })
            }
        })
    }

    componentDidMount() {
        new Clipboard('.icon-copy');
        AJAX.appendBaiduAnalysis()
    }

    handleOpenBox = () => {
        const { data } = this.state;

        const isRecharge = data.isNeedPay && !data.isEnough;
        if (isRecharge) {
            window.location.href = './TopUp?order_id=' + Tools.getParams().order_id + '&cbUrl=PickUpDetailOne';
        } else {
            Dialog.confirm({
                title: '',
                content: '请核对当前地址或柜体编号与取件信息是否一致，否则由此带来的损失由您负责。',
                okText: '仍要开箱',
                cancelText: '取消',
                onOK: () => {
                    window.location.href = `./OpenBoxFinal?order_id=${Tools.getParams().order_id}`;
                },
            })
        }
    }

    handleConfirmCabinet = e => {
        e.stopPropagation();

        const { data } = this.state;
        window.location.href = `./ConfirmCabinet?order_id=${data.id}&cabinet_code=${data.cabinet_code}`;
    }

    render() {
        const { out_time, isLoading, data, showCostDetail } = this.state;

        if (isLoading) return null;

        const isRecharge = data.isNeedPay && !data.isEnough;

        const dataList = [
            { label: '存放位置', value: data.addr },
            { label: '等待时长', value: data.wait_time },
            { label: data.exp_name, value: data.exp_code },
            {
                label: '取件费用', value: data.settle_amount + '元',
                children: [
                    { label: '基础费用', value: data.basic_amount },
                    { label: '延期费用', value: data.delay_amount },
                ],
            },
        ];

        return (
            <div>
                <div className="lux-pt10 lux-pl10 lux-pr10 lux-pb10">
                    <div className="expressDetailBox">
                        {
                            dataList.map((item, index) => (
                                <div>
                                    <div className="lux-d-f lux-ai-c lux-pt10 lux-pb10" style={{ borderBottom: index !== dataList.length - 1 ? '1px solid rgba(238,238,238,1)' : '' }}>
                                        <div className="lux-c999 lux-fz14 lux-fw-500 lux-miw80">{item.label}:</div>
                                        {
                                            index === 2 && (
                                                <div className="lux-flex-1 lux-d-f lux-ai-c">
                                                    <div className="lux-c333 lux-fz14 lux-fw-500">{item.value}</div>
                                                    <img
                                                        className="icon-copy lux-ml20"
                                                        src="https://wechat.jinlb.cn/assets/images/icon-copy.png"
                                                        data-clipboard-text={item.value}
                                                        onClick={() => Toast.success({ content: '复制成功' })}
                                                    />
                                                </div>
                                            )
                                        }

                                        {
                                            item.label === '取件费用' && (
                                                <div className="lux-flex-1 lux-d-f lux-jc-sb">
                                                    <div className="lux-cfe763e lux-fz14 lux-fw-500">{item.value}</div>
                                                    <div className="lux-ca9a9a9 lux-fz14 lux-fw-500" onClick={() => this.setState({ showCostDetail: !showCostDetail })}>费用明细 ></div>
                                                </div>
                                            )
                                        }

                                        {
                                            index !== 2 && !['取件费用'].includes(item.label) && (
                                                <div className="lux-c333 lux-fz14 lux-fw-500">{item.value}</div>
                                            )
                                        }
                                    </div>
                                    {
                                        showCostDetail && item.children && (
                                            <div className="lux-pt10 lux-pl10 lux-pr10 lux-pb10 lux-bottom-line">
                                                {
                                                    item.children.map(subItem => (
                                                        <div className="lux-flex-1 lux-d-f lux-jc-sb">
                                                            <div className="lux-c999 lux-fz14 lux-fw-500">{subItem.label}</div>
                                                            <div className="lux-cfe763e lux-fz14 lux-fw-500">{subItem.value}</div>
                                                        </div>
                                                    ))
                                                }
                                            </div>
                                        )
                                    }
                                </div>
                            ))
                        }
                    </div>

                    <AdBlock type="5" />
                </div>
                <div className="footer-box">
                    <div className="footer-btn-box">
                        {
                            !out_time && (
                                <button
                                    className="footer-btn"
                                    onClick={this.handleOpenBox}
                                >
                                    {isRecharge ? '充值并开箱' : '支付并开箱'}
                                </button>
                            )
                        }
                    </div>
                </div>
            </div>
        );
    }
}

ReactDOM.render(<ExpressDetailOne />, document.getElementById('app'));
if (module.hot) {
    module.hot.accept();
}

